<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>插槽</title>
      <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
      <style>
        .parent {
          width: 600px;
          min-height: 150px;
          height: auto;
          background-color: pink;
          padding: 20px;
          margin-top: 10px;
        }
        .child {
          width: 80%;
          min-height: 100px;
          height: auto;
          padding: 0px 10px;
          border: 1px solid black;
          background-color: lightgreen;
        }
      </style>
   </head>
   <body >
     <div id="app">
         <div class='parent'>
             <h1>父组件</h1>
             <child-component>
                 <strong>父组件中的数据</strong>
             </child-component>
         </div>
         <div class='parent'>
            <h1>父组件</h1>
            <child-component>
                <strong>父组件中的数据</strong>
                <h1>slot的作用相对于一个占位符</h1>
            </child-component>
        </div>

        <div class='parent'>
            <h1>父组件</h1>
            <child-component></child-component>
        </div>

     </div>
    <script>
        Vue.component('child-component',{
            template:`
                     <div class='child'>
                        <h3>子组件</h3>
                        <hr>
                        <slot>默认数据</slot> 
                     </div>
                     `
        });
       //1. 实例化一个Vue的实例
       let vm=new Vue({
          el:'#app', 
          data:{ 
    
          }
         });
    </script>
    </body>
</html>